<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>主题编辑</title>
        <link rel="icon" th:href="${config.SITE_ICON}">
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/codemirror/lib/codemirror.css'}"/>
        <link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
    </head>
    <body>
        <div class="z-content z-theme-edit-content">
            <div class="z-card">
                <div class="z-card-header">[[${theme.name}]]</div>
                <div class="z-card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div id="theme-tree"></div>
                        </div>
                        <div class="col-md-9">
                            <div class="theme-editor">
                                <div id="codeArea"></div>
                                <button id="btn-save" class="btn btn-primary mt-15" disabled="disabled">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/codemirror/lib/codemirror.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/codemirror/mode/xml/xml.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/codemirror/mode/javascript/javascript.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/codemirror/mode/css/css.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/codemirror/mode/htmlmixed/htmlmixed.js'}"></script>
        <script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
        <script>
            $(function () {
                var themeId = '[[${theme.id}]]';
                var filePath;

                var editor = CodeMirror(document.getElementById("codeArea"), {
                    value:"",
                    mode: "text/html",
                    lineNumbers: true
                });

                App.postAjax("/admin/theme/getFiles",{themeId:themeId},function (data) {
                    if(data.status===200){
                        App.initTree("#theme-tree", {
                            data: data.data,
                            nameControl:true,
                            click: function (file) {
                                if(file.name.endsWith(".yml")){
                                    App.msg({content:"配置文件,谨慎修改！",icon:4});
                                }
                                if(file.isFile){
                                    filePath = file.path;
                                    App.mask("#btn-save");
                                    App.postAjax("/admin/theme/getFileContent",{themeId:themeId,path:filePath},function (data) {
                                        App.unmask("#btn-save");
                                        editor.setValue(data.msg);
                                    })
                                }
                            }
                        })
                    }else{
                        App.msgE(data.msg);
                    }
                });
                
                $("#btn-save").click(function () {
                    App.mask("#btn-save");
                    App.postAjax("/admin/theme/setFileContent",{themeId:themeId,path:filePath,content:editor.getValue()},function (data) {
                        App.unmask("#btn-save");
                        if(data.status===200){
                            App.msgS(data.msg);
                        }else{
                            data.msgE(data.msg);
                        }
                    })
                })

            })
        </script>
    </body>
</html>